import { useState, useRef, useEffect } from "react";
import { addEvent, removeEvent } from "@/utils";

const MORE_ICON_SRC = "https://blog-assets.jiandaoyun.com/index/icon_more.png";

export default function MenuItem({ menuItem }) {
  function getInfo(item) {
    return (
      <span className="solution-info">
        {item.icon ? (
          <div className="has-tip">
            {item.label}
            <img className="tip" src={item.icon} alt="" />
          </div>
        ) : (
          item.label
        )}
      </span>
    );
  }

  function getProductNode() {
    const listItem = menuItem.children.map((item, i) => (
      <div className="solution-item" key={i}>
        {item.map((it, ii) => {
          if (!ii)
            return (
              <div className="solution-item-tit" key={ii}>
                {it.label}
              </div>
            );
          let x;
          if (i === menuItem.children.length - 1) {
            x = "-920px";
          } else {
            x = `${i * -230}px`;
          }
          const y = `${(ii - 1) * -50}px`;
          return (
            <div className="solution-list-item" key={ii}>
              <i
                className="icon"
                style={i || ii ? { backgroundPosition: `${x} ${y}` } : {}}
              ></i>
              {getInfo(it)}
            </div>
          );
        })}
      </div>
    ));
    return <div className="solution-list-content">{listItem}</div>;
  }

  function getChildrenNode() {
    const listItem = menuItem.children.map((item, index) => {
      let x = 0,
        y = 0;
      if (menuItem.className === "jjfa") {
        x = (index + 1) % 2 ? 0 : "-197px";
        const col = Math.floor(index / 2);
        let yNum = col * -48;
        col > 1 && (yNum += 2);
        y = `${yNum}px`;
      } else {
        y = `${index * -48}px`;
      }

      return (
        <div className="solution-list-item" key={index}>
          <i
            className="icon"
            style={index ? { backgroundPosition: `${x} ${y}` } : {}}
          ></i>
          {getInfo(item)}
        </div>
      );
    });

    return (
      <div className="solution-list-content">
        {listItem}
        {menuItem.className === "jjfa" && (
          <div className="solution-more-btn">
            <div className="content">
              100+方案
              <img className="tip" src={MORE_ICON_SRC} alt="" />
            </div>
          </div>
        )}
      </div>
    );
  }

  const [toggle, setToggle] = useState(false);
  const menuItemRef = useRef();

  useEffect(() => {
    let menuItemRefValue;
    if (menuItemRef.current) {
      menuItemRefValue = menuItemRef.current;
      addEvent(menuItemRefValue, "mouseover", open);
      addEvent(menuItemRefValue, "mouseout", close);
    }
    function open() {
      setToggle(true);
    }
    function close() {
      setToggle(false);
    }
    return () => {
      if (menuItemRefValue) {
        removeEvent(menuItemRefValue, "mouseover", open);
        removeEvent(menuItemRefValue, "mouseout", close);
      }
    };
  }, [menuItemRef]);

  return (
    <div className={`menu-item ${menuItem.className || ""}`} ref={menuItemRef}>
      <span className="s-box">{menuItem.label}</span>
      {menuItem.children && <i className="iconfont icon-arrow-down"></i>}
      {menuItem.children && (
        <div
          className="solution-list"
          style={{ display: toggle ? "block" : "none" }}
        >
          {menuItem.className === "product-function"
            ? getProductNode()
            : getChildrenNode()}
        </div>
      )}
    </div>
  );
}
